<template>
	<el-dialog
		title="验证手机号"
		width="350px"
		:visible="showLoginToast"
		:close-on-click-modal="false"
		@update:visible="(val) => $store.commit('SET_SHOW_LOGIN_TOAST', val)"
	>
		<div class="line">
			<div class="input-box" :class="{ 'input-box--white': namefocus }">
				<input
					v-model="mobile"
					class="input"
					type="text"
					placeholder="您投保使用的手机号"
					@focus="namefocus = true"
					@blur="namefocus = false"
					autocomplete="new-password"
				/>
			</div>
		</div>
		<div class="line" style="grid-template-columns: 1fr 100px">
			<div class="input-box" :class="{ 'input-box--white': capturefocus }">
				<input
					v-model="captcha"
					class="input"
					type="text"
					placeholder="图形验证码"
					@focus="capturefocus = true"
					@blur="capturefocus = false"
					autocomplete="new-password"
					style="font-family: Arial"
				/>
			</div>
			<img
				:src="'/api/insurance/business/login/captcha?n=' + timestamp"
				style="width: 60px; height: 25px; object-fit: cover; margin-left: 0.5em"
			/>
		</div>
		<div class="line" style="grid-template-columns: 1fr 100px">
			<div class="input-box" :class="{ 'input-box--white': pswdfocus }">
				<input
					v-model="code"
					class="input"
					type="text"
					placeholder="手机验证码"
					@focus="pswdfocus = true"
					@blur="pswdfocus = false"
					autocomplete="new-password"
					style="font-family: Arial"
				/>
			</div>
			<div class="verify-btn" @click="sendCode">
				<span v-if="sending">
					<i class="el-icon-loading"></i>
				</span>
				<span v-else>
					{{ second ? second + 's' : '获取验证码' }}
				</span>
			</div>
		</div>
		<div class="button" @click="login">
			提交验证
			<i class="el-icon-loading" v-if="loading"></i>
		</div>
	</el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import * as REGEXP from '@/const/REGEXP'
import waitSecond from '@/utils/wait-second.js'
import { sendLoginSMS, doLogin, doSMSLogin } from '@/api/login'
export default {
	data() {
		return {
			timestamp: Date.now(),
			mode: 'mobile',
			namefocus: false,
			pswdfocus: false,
			capturefocus: false,

			mobile: '',
			username: '',
			password: '',
			captcha: '',
			code: '',

			second: 0, // 验证码等待读秒
			sending: false, // 验证码发送中

			loading: false // 登录
		}
	},
	computed: {
		...mapGetters(['showLoginToast'])
	},
	mounted() {
		const second = localStorage.getItem('verify-second')
		if (second) {
			this.second = Number(second)
			this.wait(second)
		}
	},
	methods: {
		sendCode() {
			if (this.second || this.sending) return
			if (!REGEXP.telphone.test(this.mobile)) {
				this.$message.error('请输入正确的手机号')
				return
			}
			this.sending = true
			sendLoginSMS({ mobile: this.mobile, captcha: this.captcha })
				.then(() => this.wait(59))
				.catch(() => {
					this.timestamp = Date.now()
				})
				.finally(() => {
					this.sending = false
				})
		},
		wait(second) {
			waitSecond({
				second,
				onPro: (second) => {
					this.second = second
					localStorage.setItem('verify-second', second)
				},
				onEnd: () => {
					this.second = 0
					localStorage.removeItem('verify-second')
				}
			})
		},
		login() {
			if (this.loading) return

			let promise
			if (this.mode === 'mobile') {
				// 手机登录
				if (!REGEXP.telphone.test(this.mobile)) {
					this.$message.error('请输入正确的手机号')
					return
				}
				if (!this.code) {
					this.$message.error('请输入验证码')
					return
				}
				this.loading = true
				promise = doSMSLogin({
					mobile: this.mobile,
					code: this.code
				})
			} else {
				if (!this.username) {
					this.$message.error('请输入用户名')
					return
				}
				if (!this.password) {
					this.$message.error('请输入密码')
					return
				}
				this.loading = true
				promise = doLogin({
					username: this.username,
					password: this.password
				})
			}

			promise
				.then((res) => {
					return this.$store.dispatch('Login', {
						token: res.data
					})
				})
				.then(() => {
					return this.$store.dispatch('getInfo')
				})
				.then(() => {
					this.$store.commit('SET_SHOW_LOGIN_TOAST', false)
				})
				.catch(() => {
					this.timestamp = Date.now()
				})
				.finally(() => {
					this.loading = false
				})
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
::v-deep {
	.el-dialog__body {
		padding-top: 5px;
	}
}
.line {
	display: grid;
	align-items: center;
	margin: 12px 0;
	// margin: 12px 32px;
	gap: 8px;
}

.input-box {
	border: 1px solid #e6e6e6;
	background-color: rgba(255, 255, 255, 0.15);
	height: 40px;
	border-radius: 7px;
	padding: 0 15px;
	display: flex;
	align-items: center;

	&--white {
		// background-color: rgba(255, 255, 255, 0.4) !important;
		border-color: #999;
	}

	.input {
		display: block;
		width: 100%;
		background-color: transparent;
		transition: background-color 9999999s 9999999s;
		outline: none;
		border: none;
		padding: 0;
		margin: 0;
		font-size: 14px;
		// color: #fff;
		font-family: 'Noto Sans SC';
	}
}

.verify-btn {
	border: 2px solid 5f88ff;
	border-radius: 6px;
	color: #fff;
	background-color: #5f88ff;
	font-size: 14px;
	text-align: center;
	line-height: 39px;
	letter-spacing: 0;
	padding: 0 5px;
	white-space: nowrap;
	cursor: pointer;
}

.input::placeholder {
	color: #999;
	font-family: 'Noto Sans SC';
}
.input:-webkit-autofill {
	color: #fff;
}

.button {
	line-height: 39px;
	text-align: center;
	font-size: 16px;
	background-color: #5f88ff;
	margin-top: 20px;
	// margin: 30px 32px 32px;
	border-radius: 99px;
	color: #fff;
	cursor: pointer;
	user-select: none;
	// box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.15) inset;
	border: 2px solid rgba(0, 0, 0, 0.1);
	&:active {
		box-shadow: none;
	}
}
</style>
